  <template>
    <div class="login">
      <el-form :model="queryParams4" ref="queryForm4" size="small" :inline="true" label-width="88px">
        <el-form-item label="真实IP" prop="realIp">
          <el-input
            v-model="queryParams4.realIp"
            placeholder="请输入真实IP"
            clearable
            @keyup.enter.native="handleQuery4"
          />
        </el-form-item>
        <el-form-item label="设备" prop="agent">
          <el-input
            v-model="queryParams4.agent"
            placeholder="请输入设备"
            clearable
            @keyup.enter.native="handleQuery4"
          />
        </el-form-item>
        <el-form-item label="来源" prop="accept">
          <el-input
            v-model="queryParams4.accept"
            placeholder="请输入来源"
            clearable
            @keyup.enter.native="handleQuery4"
          />
        </el-form-item>
        <el-form-item label="浏览器语言" prop="acceptLua">
          <el-input
            v-model="queryParams4.acceptLua"
            placeholder="请输入浏览器语言"
            clearable
            @keyup.enter.native="handleQuery4"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery4">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery4">重置</el-button>
        </el-form-item>
      </el-form>
      <div style="height: 20px;"></div>
      <el-table :data="leachRecordsList">
        <el-table-column label="ID" align="center" prop="id" />
        <el-table-column label="工单ID" align="center" prop="workOrderId" />
        <el-table-column label="访问IP" align="center" prop="ip" />
        <el-table-column label="请求数据" align="center" prop="body" :show-overflow-tooltip="true" />
        <el-table-column label="返回结果" align="center" prop="result" :show-overflow-tooltip="true" />
        <el-table-column label="真实IP" align="center" prop="realIp" />
        <el-table-column label="设备" align="center" prop="agent" :show-overflow-tooltip="true"/>
        <el-table-column label="来源" align="center" prop="accept" :show-overflow-tooltip="true"/>
        <el-table-column label="浏览器语言" align="center" prop="acceptLua" :show-overflow-tooltip="true"/>
        <el-table-column label="是否通过" align="center" prop="adopt">
          <template slot-scope="scope">
            <span style="color: #F56C6C;" v-if="scope.row.adopt === 0">不通过</span>
            <span style="color: #67C23A;" v-if="scope.row.adopt === 1">通过</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" />
      </el-table>

      <pagination
        v-show="total4>0"
        :total="total4"
        :page.sync="queryParams4.pageNum"
        :limit.sync="queryParams4.pageSize"
        @pagination="getList4"
      />
    </div>
  </template>

  <script>
  import { LeachList} from "@/api/app/census";
import d from "highlight.js/lib/languages/d";
  export default {
    name: "Leach",
    data() {
      return {
        leachRecordsList:[],total4:0,
        queryParams4: {
          pageNum: 1,
          pageSize: 10,
          workOrderId: null,
          ip: null,
          body: null,
          result: null,
          adopt: null,
          headers: null,
          cookies: null,
          realIp: null,
          agent: null,
          accept: null,
          acceptLua: null
        },
      };
    },
    mounted(){
      const dictId = this.$route.params && this.$route.params.dictId;
      this.queryParams4.workOrderId = dictId;
      console.log(dictId,"看")
      this.getList4();
    },
    methods:{
      getList4() {
        LeachList(this.queryParams4).then(response => {
          this.leachRecordsList = response.rows;
          this.total4 = response.total;
        });
      },
      /** 搜索按钮操作4 */
      handleQuery4() {
        this.queryParams4.pageNum = 1;
        this.getList4();
      },
        /** 重置按钮操作4 */
      resetQuery4() {
        this.resetForm("queryForm4");
        this.handleQuery4();
      },
    }
  };
  </script>

  <style rel="stylesheet/scss" lang="scss">
    .login{
      box-sizing: border-box;
      padding: 30px;
    }
  </style>
